<template>
	<div class="container">
		<div class="main">
			<markdownBody :content="store.fileInfo ? store.fileInfo.content : ''" />
			<transition name="mask">
				<div class="mask" v-if="store.drawer_isShow"></div>
			</transition>
			<transition name="drawer">
				<div class="drawer" v-if="store.drawer_isShow">
					<drawerVue />
				</div>
			</transition>
		</div>

		<div class="aside">
			<selectVue />
			<router-view v-slot="{ Component }">
				<transition name="md1">
					<component :is="Component" />
				</transition>
			</router-view>
		</div>
	</div>
</template>

<script setup lang="ts">
import markdownBody from './markdownBody.vue';
import selectVue from './mode/select.vue';
import drawerVue from '@v/components/drawer/index.vue';
import { useRootStore } from '@v/store';

const store = useRootStore();
</script>

<style scoped lang="scss">
.container {
	height: 100%;
	display: flex;
	.main {
		height: 100%;
		flex-grow: 1;
		position: relative;
		overflow: clip;
		.mask {
			background-color: rgba(0, 0, 0, 0.3);
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 100%;
		}
		.drawer {
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			min-width: 300px;
			max-width: 100%;
			z-index: 1;
		}
	}
	.aside {
		height: 100%;
		width: 259px;
		min-width: 260px;
		background-color: var(--aside-bg-color);
		position: relative;
		user-select: none;
		border-left: 1px solid var(--border-color-5);
	}
}
</style>
